﻿<!DOCTYPE html>
<html>
<head>
    <title>DevExtreme Integration</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;IE=11" />
    <script src="wisej.wx"></script>
    <style>
        #splash {
            position: absolute;
            background: url("Images/logo-wisej-white.png");
            background-position: center center;
            background-size: 175px 175px;
            background-repeat: no-repeat;
            background-color: #0B5DAB;
            width: 100%;
            height: 100%;
            overflow: hidden;
            opacity: 0;
            transition: opacity 2s;
        }

        #loading {
            color: white;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 300;
            font-size: 18px;
            letter-spacing: 5px;
            text-align: center;
            width: 250px;
            position: absolute;
            bottom: calc(16% + 30px);
            margin-left: 50%;
            left: -125px;
        }

        #loading-bar {
            background-color: #6095C7;
            width: 250px;
            height: 13px;
            margin-left: 50%;
            left: -125px;
            border-radius: 13px;
            position: absolute;
            bottom: 16%;
        }

        #loading-progress {
            background-color: #C4E5FF;
            height: 100%;
            border-radius: 13px;
            width: 10px;
            transition: width 3s, left 3s;
            position: absolute;
        }

        .dx-tile-content .image {
            height: 100%;
            width: 100%;
            background-position: center;
            background-size: cover;
            display: block;
        }
    </style>
</head>
<body style="padding: 0px; margin: 0px">
    <div id="splash">
        <div id="loading">LOADING</div>
        <div id="loading-bar">
            <div id="loading-progress"></div>
        </div>
    </div>
    <script>

        var splash = document.getElementById("splash");
        var loadingProgress = document.getElementById("loading-progress");
        splash.style.opacity = 1;
        setTimeout(function () {
            loadingProgress.style.width = "100%";
            loadingProgress.style.left = "0%";
            setTimeout(function () {
                loadingProgress.style.width = "0%";
                loadingProgress.style.left = "100%";
            }, 3000);
        }, 1);

        Wisej.onLoad = function () {
            var splash = document.getElementById("splash");
            splash.parentNode.removeChild(splash);
        }
    </script>
</body>
</html>
